<template>
	<div>
		<!-- 引入路由 -->
		<router-view />
		<!-- 底部tar导航 -->
		<van-tabbar v-model="active" active-color="#ff6e4a" inactive-color="#000" @change="onChange" >
			<van-tabbar-item icon="home-o">电影</van-tabbar-item>
			<van-tabbar-item icon="location-o">影院</van-tabbar-item>
			<van-tabbar-item icon="friends-o">资讯</van-tabbar-item>
			<van-tabbar-item icon="setting-o">我的</van-tabbar-item>
		</van-tabbar>
	</div>
</template>

<script>
	export default {
		data() {
			return {
				active: 0,
			};
		},
		methods: {
			//   点击切换路由
			onChange(index) {
				//   根据下标切换
				switch (index) {
					// 跳转电影页面
					case 0:
						this.$router.replace({
							name: 'hot'
						});
						break;
						// 跳转影院页面
					case 1:
						this.$router.replace({
							name: 'cinema'
						});
						break;
				}
			}
		},
		// 挂载后钩子函数
		mounted() {
			/* 
		原因：浏览器刷新后tar的选择改变
		将tar的active改正
	  */
			// 提取出当前路由名字
			let name = this.$route.name
			// 名字对应修改active
			console.log(name)
			switch (name) {
				case "hot":
					this.active = 0;
					break;
				case "cinema":
					this.active = 1;
					break
			}
		},
		// 挂载后钩子函数
		updated() {
			/* 
				原因：浏览器刷新后tar的选择改变
				将tar的active改正
		*/
			// 提取出当前路由名字
			let name = this.$route.name
			// 名字对应修改active
			switch (name) {
				case "hot":
					this.active = 0;
					break;
				case "cinema":
					this.active = 1;
					break;
			}
		}
	};
</script>

